<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>:: CodeThatXPBar - navigation control that provides with the same look, feel and functionality as the special control bar which can be found in Windows Explorer, Control panel and other system tools of the WindowsXP ::</title>
<meta http-equiv="content-language" content=en>
<meta name=robots content="INDEX, FOLLOW">
<meta http-equiv=keywords content="CodeThatXPBar, script, bar, XP bar, javascript, javascript XP bar, free, free javascript XP bar, cross-browser, html, xml, css, control panel, Windows XP, explorer">
<meta http-equiv=description content="CodeThatXPBar is a navigation control that provides with the same look, feel and functionality as the special control bar which can be found in Windows Explorer, Control panel and other system tools of the WindowsXP">
<meta http-equiv=expires content="Mon, 01 Jan 1990 00:00:00 GMT">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv=pragma content="no-cache">
<meta name="revisit-after" content="1 day">
<meta http-equiv="content-script-type" content="text/javascript">
<link rel=stylesheet type="text/css" href="s.css">

<script language=javascript src="own.js"></script></head>
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 bgcolor=#FFFFFF>
<table width=768 border=0 cellpadding=0 cellspacing=0>
<tr>
<td><div style="position:absolute;left:320;top:154;z-index:1"><img src="img/mm.gif" width=2 height=10></div><img src="img/s.gif" width=1 height=2></td>
</tr><tr>
<td class=ct13><table width=768 height=42 border=0 cellpadding=0 cellspacing=0>
	<tr>
	<td><img src="img/s.gif" width=20 height=1></td>
	<td valign=middle><p class=cp18><nobr><font class=ca8>User Manual <br><a href="../index.html" class="ca9"><font class="cf6">S</font>amples</a></font></nobr></p></td>
	<td width=13%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle><p class=cp18><nobr><a class=ca9 href="index.html"><font class=cf6>In</font>troduction</a>&nbsp; &nbsp;
	<a class=ca9 href="bar_style.html"><font class=cf6>S</font>tyle customize</a>&nbsp; &nbsp;
	<a class=ca9 href="bar_pos.html"><font class=cf6>B</font>ar position</a>&nbsp; &nbsp;
	<a class=ca9 href="bar_act.html"><font class=cf6>It</font>ems' actions</a></nobr></p>
	<p class=cp18><nobr><a class=ca9 href="bar_html.html"><font class=cf6>H</font>TML code as items' text</a>&nbsp; &nbsp;
	
	<a class=ca9 href="bar_db.html"><font class=cf6>X</font>PBar from the database</a></nobr></p>
	
	<p class=cp18><nobr><a class=ca9 href="bar_beh.html"><font class=cf6>C</font>hange XPBar Behaviour</a>&nbsp; &nbsp;
	<a class=ca9 href="standard_vs_pro.html?h=xpbar#xpbar"><font class=cf6>S</font>tandard vs PRO</a></nobr></p></td>
	<td width=23%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle><p class=cp18><nobr><font class=ca8>On-line Builder</font></nobr></p></td>
	<td width=13%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle>
	
	<p class=cp18><a class=ca9 href="http://codethat.com/xpbar/ctxpbarpro_builder.html">PRO</a></p>

	
	<p class=cp18><a class=ca9 href="../Builder/ctxpbarstd_builder.html">STD</a></p>
	
	</td>
	<td width=23%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle><p class=cp18><nobr><a class=ca8 href="userguide.html"><font class=cf7>1</font>23Guide</a>&nbsp; &nbsp;

	
	<p class=cp18><nobr><a class=ca8 href="http://codethat.com/sales.html"><font class=cf7>O</font>rder PRO Now</a>&nbsp; &nbsp;

	
	<a class=ca8 href="faq.html"><font class=cf7>F</font>AQ</a></nobr></p></td>
	<td width=28%><img src="img/s.gif" width=1 height=1></td>
	</tr>
</table></td>
</tr><tr>
<td><img src="img/s.gif" width=1 height=2></td>
</tr>
<tr>
<td class=ct12><table width=768 height=30 border=0 cellpadding=0 cellspacing=0>
	<tr><td valign=middle><h1 class=cp9>CODETHATXPBAR FAQ</h1></td></tr>
</table></td>
</tr><tr>
<td>

<h1 class=cp10><font class=cf5>Questions List</font></h1>
<p class=cp19><a class=ca4 href="faq.html#1"><img src="img/ad.gif" width=11 height=7>How do I insert CodeThatXPBar in where the old navigation bar was? Do I have to compile it as java and stick it in as an applet?</a></p>
<p class=cp19><a class=ca4 href="faq.html#2"><img src="img/ad.gif" width=11 height=7>Is it possible to have more than one level expandable menus?</a></p>
<p class=cp19><a class=ca4 href="faq.html#3"><img src="img/ad.gif" width=11 height=7>Is there any way to expand the panes when the users moveover on the item bar rather than click on the title bar and all other panes are collapsed at the same time?</p>
<p class=cp19><a class=ca4 href="faq.html#4"><img src="img/ad.gif" width=11 height=7>Does xp menu keep its state between .net postbacks?</a></p>
<p class=cp19><a class=ca4 href="faq.html#5"><img src="img/ad.gif" width=11 height=7>We code our web applications to load and run javascript from hidden (child) frames. I tried to do just that with the CodeThatXPBar but with no success.</a></p>
<p class=cp19><a class=ca4 href="faq.html#6"><img src="img/ad.gif" width=11 height=7>Is there a way to initially display the xpbar with one or more of it's "panes" expanded? (as if the user had clicked on the title bar).</p>

<h1 class=cp10><font class=cf5>Answers</font></h1>

<p class=cp10><a name=#1></a><font class=cf4>How do I insert CodeThatXPBar in where the old navigation bar was? Do I have to compile it as java and stick it in as an applet?</font></p>
<p class=cp10>No JavaScript integration is somewhat different from the Java applets integration. The best starting point for you would be to read the following beginners guide: <a class=ca5 href="userguide.html">123 User Guide</a>. It will give you step by step instructions on how to create and interate the bar into the page. You may also want to inspect the samples files and/or files produced by the CodeThatBuilder.</p>

<p class=cp10><a name=#2></a><font class=cf4>Is it possible to have more than one level expandable menus?</font></p>
<p class=cp10>No, this is not possible for now. For more than two expandable levels I'd recommend to use a tree.</p>

<p class=cp10><a name=#3></a><font class=cf4>Is there any way to expand the panes when the users moveover on the item bar rather than click on the title bar and all other panes are collapsed at the same time?</font></p>
<p class=cp10>Expand/collapse by mouseover is not possible in current version of XPBar. However, you can collapse all items except clicked one with some additional scripting.</p>

<p class=cp10><a name=#4></a><font class=cf4>Does xp menu keep its state between .net postbacks?</font></p>
<p class=cp10>No, after page refresh all items will be collapsed. But it's possible to expand some items using additional scripting: <a class=ca5 href="forum/viewtopic.php?t=3">http://www.codethat.com/forum/viewtopic.php?t=3</a></p>

<p class=cp10><a name=#5></a><font class=cf4>We code our web applications to load and run javascript from hidden (child) frames. I tried to do just that with the CodeThatXPBar but with no success.</font></p>
<p class=cp10>The current version of XPBar will not work after onLoad event because of compatibility restriction. We are currently working on that, so this feature will be available soon for modern browsers. For now it's better to include a bar script and create an XPBar within a page it's placed in.</p>

<p class=cp10><a name=#6></a><font class=cf4>Is there a way to initially display the xpbar with one or more of it's "panes" expanded? (as if the user had clicked on the title bar).</font></p>
<p class=cp10>Yes there's a way. Please use the code:</p>

<pre class=cc1>
<font class=cc4>&lt;</font><font class=cc3>html</font><font class=cc4>&gt;&lt;</font><font class=cc3>head</font><font class=cc4>&gt; 

&lt;</font><font class=cc3>script language="javascript1.2" src="../Scripts/codethatsdk.js"</font><font class=cc4>&gt;</font><font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>script</font><font class=cc4>&gt; 
&lt;</font><font class=cc3>script language="javascript1.2" src="../Scripts/codethatxpbarstd.js"</font><font class=cc4>&gt;</font><font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>script</font><font class=cc4>&gt; 
&lt;</font><font class=cc3>script language="javascript1.2" src="bar1.js"</font><font class=cc4>&gt;</font><font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>script</font><font class=cc4>&gt; 
&lt;!--</font><font class=cc3> bar definition //--&gt;</font><font class=cc4> 
&lt;</font><font class=cc3>script language="javascript1.2"</font><font class=cc4>&gt;
&lt;!--</font>
<font class=cc3><font class=cc5>var</font> bar1 <font class=cc2>=</font> <font class=cc5>new</font> CXPBar<font class=cc2>(</font>BarDef<font class=cc2>,</font></font> <font class=cc6>'bar1'</font><font class=cc2>);</font> //create the bar as usual
//functions below are required to expand items
<font class=cc3><font class=cc5>function</font> openitem <font class=cc2>(</font>idx<font class=cc2>)</font> <font class=cc7>{</font>
	bar1<font class=cc2>.</font>menu<font class=cc2>.</font>items<font class=cc8>[</font>idx<font class=cc8>]</font><font class=cc2>.</font>toggle<font class=cc2>()</font>
<font class=cc7>}</font>

<font class=cc5>function</font> load_h <font class=cc2>()</font> <font class=cc7>{</font>
	openitem<font class=cc2>(</font><font class=cc4>0</font><font class=cc2>);</font></font> //0 is an index of an item to expand
	<font class=cc3>openitem<font class=cc2>(</font><font class=cc4>2</font><font class=cc2>);</font></font> //so on
	<font class=cc3>bar1<font class=cc2>.</font>click<font class=cc2>();</font></font> //required!
<font class=cc7>}</font><font class=cc2>;</font>
//set the onload handler
<font class=cc3>CodeThat<font class=cc2>.</font>setOnLoad<font class=cc2>(</font>load_h<font class=cc2>);</font></font> 
//-->
<font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>script</font><font class=cc4>&gt; 
&lt;</font><font class=cc5>/</font><font class=cc3>head</font><font class=cc4>&gt; 
&lt;</font><font class=cc3>body</font><font class=cc4>&gt; 
&lt;</font><font class=cc3>script language="javascript1.2"</font><font class=cc4>&gt;
&lt;!--</font>
<font class=cc3>bar1<font class=cc2>.</font>create<font class=cc2>();</font>
bar1<font class=cc2>.</font>run<font class=cc2>();</font></font> 
//-->
<font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>script</font><font class=cc4>&gt; 
&lt;</font><font class=cc5>/</font><font class=cc3>body</font><font class=cc4>&gt; 
&lt;</font><font class=cc5>/</font><font class=cc3>html</font><font class=cc4>&gt;</font>
</pre>

</td>
</tr>
<tr>
<td><p class=cp8>&copy; <a class=ca2 href="">CodeThat.com</a>, 2003-2005<br>
Design by <a class=ca2 href="http://www.xt-labs.com">XTLabs, Inc</a>.</p></td>
</tr>
</table></body></html>